/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-12-18 11:17:58
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-12-22 21:29:20
 * @FilePath: \project-my\next-learn-app\src\views\tailwind\checkOut.tsx
 * @Description: 
 */
'use client'
import React, { useState, useEffect } from 'react'
// import styles from './check.module.scss'

interface CheckOutProps {
    checked: boolean,
    change: (checked: boolean) => void
}
export default function CheckOut({ checked, change }: CheckOutProps) {

    // const [isChecked, setIsChecked] = useState(false)
    const [text, setText] = useState('')
    const handleCheckboxChange = (evnet: React.ChangeEvent<HTMLInputElement>) => {
        // setIsChecked(!isChecked)
        change(evnet.target.checked)
    }
    const getTestApi = async () => {
        const testData = await fetch('http://localhost:3008/v1/test/json').then(res => res.json())
        setText(testData.data)
        console.log('%c [ testData ]-25', 'font-size:13px; background:pink; color:#bf2c9f;', testData)
    }
    useEffect(() => {
        // setIsChecked(checked)
        getTestApi()
    }, [])

    return (
        <div>
            <label className='relative cursor-pointer text-indigo-500'>
                <input type="checkbox" checked={checked} onChange={handleCheckboxChange} className='hidden peer' />
                <span className='block w-16 h-8 bg-slate-400 peer-checked:bg-indigo-500 peer-checked:bg-current rounded-full shadow-inner'></span>
                {/* <i className={styles.idot}></i> */}
                <i className='w-8 h-8 bg-white rounded-full absolute left-0 top-0 scale-90 peer-checked:left-8 translation-all'></i>
            </label>

            <div>test: {text}</div>
        </div>
    )
}
